<template>
  <!-- 底部回复弹出层 -->
  <van-popup
    class="re-pop"
    :value="value"
    @input="onInput"
    position="bottom"
    :style="{ height: '24%' }"
  >
    <van-field
      autosize
      type="textarea"
      autofocus
      v-model.trim="reInputValue"
      :placeholder="placeholder"
      rows="4"
    />
    <span @click="submitComment" :class="{ disabled: !reInputValue.trim() }"
      >发送</span
    >
  </van-popup>
</template>

<script>
import { addComments } from '../../api/find'
export default {
  props: ['value', 'placeholder', 'parentComment'],
  data () {
    return {
      // 回复框双向绑定的内容
      reInputValue: ''
    }
  },
  methods: {
    onInput (event) {
      this.$emit('input', event)
    },
    // 发表评论
    submitComment () {
      // 根据是否有父评论执行不同的逻辑
      if (this.parentComment) {
        // 回复评论
        addComments({
          content: this.reInputValue,
          article: this.$route.params.id,
          parent: this.parentComment.id
        }).then(res => {
          // console.log('res:', res)
          // 不需要在最外层数组添加
          // 只需要给当前的父评论添加回复评论即可
          this.parentComment.children_comments.push(res.data.data)
          // 关闭弹框
          this.$emit('input', false)
          // 清空
          this.reInputValue = ''
        })
      } else {
        // 为文章添加评论
        addComments({
          content: this.reInputValue,
          article: this.$route.params.id
        }).then(res => {
          // console.log(res)
          // 关闭 通知父组件关闭
          this.$emit('input', false)
          // 清空
          this.reInputValue = ''
          res.data.data.star = 0
          // 追加到数组的最开始
          this.$emit('addComment', res.data.data)
        })
      }
    }
  }
}
</script>

<style></style>
